<template>
  <!-- <div v-html="test"></div> -->
  <div ref="editor" data-placeholder="请输入内容..."></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { uploadImg } from "@/utils/api/customerService/index";

// const test = '<p>wetsertwrf<img src="http://47.109.45.67:2007/Upload/image/20240702/CRP-074019um2KFfRg.png">fsjfesikjtjhjhhbdsg</p>'
const editor = ref("wjertioejtriojtgoiejtrioke4jt4");
let quillInstance = null;
onMounted(() => {
  if (process.client) {
    import("quill").then(({ default: Quill }) => {
      // 初始化 Quill 编辑器
      quillInstance = new Quill(editor.value, {
        // Quill 配置项
      });
      // 初始时检查并设置占位符
      checkPlaceholder();

      // 监听文本变化事件
      quillInstance.on("text-change", function () {
        checkPlaceholder();
      });

      function checkPlaceholder() {
        // 获取编辑器内容
        const content = getEditor();
        // 如果内容为空，添加占位符
        if (!content.trim() || content.trim() === "<p><br></p>") {
          // 这里你可以使用任何方式来显示占位符，比如添加一个绝对定位的 div
          // 或者修改 Quill 容器的 CSS 来显示占位符文本
          // 例如，使用 CSS 类来显示占位符
          quillInstance.root.classList.add("has-placeholder");
        } else {
          // 如果内容不为空，移除占位符
          quillInstance.root.classList.remove("has-placeholder");
        }
      }
      quillInstance.root.addEventListener(
        "paste",
        async (e) => {
          // 阻止默认行为

          // 获取粘贴的剪贴板数据
          const items = (e.clipboardData || window.clipboardData).items;

          for (let index in items) {
            const item = items[index];
            if (item.kind === "file" && item.type.indexOf("image/") !== -1) {
              const blob = item.getAsFile();

              let formData = new FormData();
              formData.append("file", blob);
              // 转换为Base64（如果需要，尽管通常可以直接上传Blob）
              // 这里省略了转换为Base64的代码，因为我们可以直接上传Blob

              // 假设你已经有一个函数可以上传图片并返回线上地址
              // const url = await uploadImage(blob);
              // 阻止默认行为
              e.preventDefault();
              uploadImg(formData)
                .then((resData) => {
                  let res = JSON.parse(resData.data.value);
                  if (res?.code === 200) {
                    const runtimeInfo = useRuntimeConfig();
                    let fileUploadUrl = runtimeInfo.public.fileUploadUrl;
                    let imgSrc = fileUploadUrl + res?.src;
                    let curindex = quillInstance.getSelection(true).index;
                    // 插入图片地址
                    quillInstance.insertEmbed(curindex, "image", imgSrc);
                    // 光标后移一位
                    quillInstance.setSelection(curindex + 1);
                  }
                })
                .catch(() => {});
            }
          }
        },
        true
      );
    });
  }
});
const getEditor = () => {
  return quillInstance.root.innerHTML;
};
const setEditor = (content) => {
  quillInstance.root.innerHTML = content;
};
defineExpose({
  getEditor: getEditor,
  setEditor: setEditor,
});
</script>
<style scoped lang="scss">
.ql-container {
  height: 100%;
  :deep(.has-placeholder){
    &::before {
    display: inline-block;
    content: "您可以在此处写下您的想法 (请注明想要修改的稿件名称); 支持直接粘贴图片到此输入框中.";
    color: #999; /* 占位符颜色 */
    position: absolute;
    /* 其他必要的样式，如定位、z-index 等 */
  }
  }
}
</style>
